<template>
	<div class="content-box user-detail-wrapper" v-loading="loading">
		<div class="el-form-sub-title">基本信息</div>
		<div class="flex-center">
			<el-image :src="userInfo.avatar || default_photo" class="flex-shrink avatar" style="width: 60px; height: 60px" fit="cover" />
			<div class="ml10">
				<div class="name">
					<span style="font-weight: bold">{{ userInfo.nickName }}</span>
					<el-tag type="warning" class="ml10" effect="dark">
						{{ userInfo.level }}
					</el-tag>
				</div>
				<div class="time">
					<el-icon v-if="userInfo.gender === 1"><Male /></el-icon>
					<el-icon v-else><Female /></el-icon>
					<span>{{ userInfo.address }}</span>
				</div>
			</div>
		</div>
		<el-row class="row-bg mt10">
			<el-col :span="8"
				><span style="color: #888">用户来源：{{ constant.APPTYPE[userInfo?.appType] }}</span></el-col
			>
			<el-col :span="8"
				><span style="color: #888">手机号：{{ userInfo.mobile }}</span></el-col
			>
			<el-col :span="8"
				><span style="color: #888"
					>用户类型：
					<el-tag :type="userInfo.userType ? 'primary' : 'success'">
						{{ constant.USERTYPE[userInfo.userType] }}
					</el-tag>
				</span></el-col
			>
		</el-row>
		<el-row class="row-bg mt5">
			<el-col :span="8"
				><span style="color: #888">生日：{{ userInfo.birthday }}</span></el-col
			>
			<el-col :span="8"
				><span style="color: #888">积分：{{ userInfo.rewards }}</span></el-col
			>
		</el-row>
		<el-row class="row-bg mt5">
			<el-col :span="8"
				><span style="color: #888">用户注册时间：{{ userInfo.createTime }}</span></el-col
			>
			<el-col :span="8"
				><span style="color: #888">最近访问时间：{{ userInfo.lastLoginTime }}</span></el-col
			>
			<el-col :span="8"
				><span style="color: #888">最近消费时间：{{ userInfo.lastPayTime }}</span></el-col
			>
		</el-row>
		<el-row class="row-bg mt5">
			<el-col :span="12"
				><span style="color: #888">最近收货地址：{{ userInfo.lastAddress }}</span></el-col
			>
		</el-row>
		<el-divider />
		<div class="el-form-sub-title">商城统计</div>
		<el-row class="row-bg">
			<el-col :span="4"
				><span style="color: #888">累计消费金额：{{ fenToYuan(userInfo?.store?.payAmount) }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">累计消费订单数：{{ userInfo?.store?.orderAmount }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">客单价：{{ fenToYuan(userInfo?.store?.orderAverage) }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">累计退款金额：{{ fenToYuan(userInfo?.store?.refundAmount) }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">累计退款订单数：{{ userInfo?.store?.refundOrderAmount }}</span></el-col
			>
		</el-row>
		<el-divider />
		<div class="el-form-sub-title">集市统计</div>
		<el-row class="row-bg">
			<el-col :span="4"
				><span style="color: #888">累计消费金额：{{ fenToYuan(userInfo?.market?.payAmount) }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">累计消费订单数：{{ userInfo?.market?.orderAmount }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">客单价：{{ fenToYuan(userInfo?.market?.orderAverage) }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">累计售卖金额：{{ fenToYuan(userInfo?.market?.sellAmount) }}</span></el-col
			>
			<el-col :span="4"
				><span style="color: #888">累计售卖订单数：{{ userInfo?.market?.sellOrderAmount }}</span></el-col
			>
		</el-row>
		<el-divider />
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="交易订单" name="0">
				<el-table :data="userInfo.orderList">
					<el-table-column label="订单编号" prop="orderNo" minWidth="200" align="center">
						<template #default="{ row }">
							<el-link type="primary" :underline="false" @click="() => $router.push(`/order/query/detail/${row.orderId}`)">
								{{ row.orderNo }}
							</el-link>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" prop="createTime" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="订单类型" prop="orderType" minWidth="200" align="center"
						><template #default="{ row }"> {{ constant.ORDERTYPE[row.orderType] }} </template></el-table-column
					>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="持有酒藏" name="1">
				<el-table :data="userInfo.certificateList">
					<el-table-column label="酒藏ID" prop="id" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="酒藏来源" prop="orderNo" minWidth="300" align="center">
						<template #default="{ row }">
							<span class="mr5">
								{{ row.certificateType == 0 ? 'B2C商城' : row.certificateType == 1 ? 'C2C商城' : '好友赠送' }}
							</span>
							<el-link
								style="vertical-align: baseline"
								v-if="row.orderNo"
								type="primary"
								:underline="false"
								@click="() => router.push(`/order/query/detail/${row.orderId}`)"
							>
								{{ row.orderNo }}
							</el-link>
						</template>
					</el-table-column>
					<el-table-column label="商品ID" prop="productId" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="商品名称" prop="productName" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="规格ID" prop="skuId" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="规格名称" prop="skuName" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="酒藏链码" prop="certificateCode" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="发行时间" prop="createTime" minWidth="200" align="center"> </el-table-column>
					<el-table-column label="剩余存储时长(天)" prop="availableDays" minWidth="200" align="center"> </el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="tsx" name="userDetail">
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { useRoute, useRouter } from 'vue-router';
import { fetchUserDetail } from '/@/api/user';
import constant from '/@/utils/constant';
import { fenToYuan } from '/@/utils/commonFunction';
import default_photo from '/@/assets/images/default_photo.jpg';

const route = useRoute();
const router = useRouter();

const userInfo = ref<any>({});
const loading = ref(false);
const activeName = ref('0');

onMounted(async () => {
	loading.value = true;
	const res = await fetchUserDetail({ id: route.params.id });
	if (res.code === 200) {
		const { data } = res;
		userInfo.value = data;
	}

	loading.value = false;
});
</script>

<style lang="scss">
.user-detail-wrapper {
}
</style>
